<template>
   <main>
      <router-view v-slot="{ Component }">
         <transition name="slide-fade" mode="out-in">
            <component :is="Component" />
         </transition>
      </router-view>
   </main>
   <nav class="tab-wrapper" v-show="!$route.meta.hideTabBar">
      <RouterLink active-class="active" class="tab" :class="{ active: $route.path.startsWith('/film/') }" to="/film">
         <p><i class="fa fa-youtube-play"></i></p>
         <p>电影</p>
      </RouterLink>
      <RouterLink active-class="active" class="tab" to="/cinema">
         <p><i class="fa fa-windows"></i></p>
         <p>影院</p>
      </RouterLink>
      <RouterLink active-class="active" class="tab" to="/news">
         <p><i class="fa fa-twitch"></i></p>
         <p>资讯</p>
      </RouterLink>
      <RouterLink active-class="active" class="tab" to="/mine">
         <p><i class="fa fa-user-circle-o"></i></p>
         <p>我的</p>
      </RouterLink>
   </nav>
</template>
<script setup>
import { RouterLink, RouterView } from "vue-router";
import router from "./router";
</script>
<style lang="scss" scoped>
@import "./assets/variable.scss";
main {
   height: calc(100vh - 50px);
   overflow: scroll;
}
.container {
   margin-bottom: 50px;
}
.tab-wrapper {
   position: fixed;
   width: 100%;
   bottom: 0;
   border-top: 1px solid $myLightGray;
   display: flex;
   background-color: white;
   .tab {
      height: 49px;
      // line-height: 49px;
      flex-grow: 1;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-decoration: none;
      color: #888;
      p {
         font-size: 12px;
         i {
            font-size: 20px;
         }
      }
   }
   .tab.active {
      color: $myOrange;
   }
}
.slide-fade-enter-active,
.slide-fade-leave-active {
   transition: all 0.5s ease;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
   opacity: 0;
   transform: translateY(20px);
}
</style>
